<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>新闻详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f9f9f9;
        }

        .detail-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 30px;
            max-width: 800px;
            margin: auto;
        }

        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 8px 12px;
            font-size: 14px;
            background-color: #007BFF; /* 蓝底 */
            color: white; /* 白字 */
            border: none;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10;
        }

        .detail-card {
            position: relative; /* 确保绝对定位子元素以它为基准 */
        }

        h2 {
            color: #333;
        }

        .detail-card h2 {
            color: #333;
            text-align: center;
        }

        p {
            line-height: 1.6;
        }

        small {
            color: #777;
        }
    </style>
</head>
<body>
<div class="detail-card" id="detail-content">
    <button id="backButton" class="back-button">← 返回</button>
    <h2 id="title">加载中...</h2>
    <p id="content"></p>
    <small id="info"></small>
</div>

<script>
    function loadDetails() {
        const urlParams = new URLSearchParams(window.location.search);
        const docId = urlParams.get("id");

        if (!docId) {
            document.getElementById("detail-content").innerHTML = "<p>无效的文档ID</p>";
            return;
        }

        fetch(`/api/document?id=${docId}`)
            .then(res => res.json())
            .then(data => {
                if (data.error) {
                    document.getElementById("detail-content").innerHTML = `<p>${data.error}</p>`;
                    return;
                }

                document.getElementById("title").innerText = data.title;
                document.getElementById("content").innerText = data.content;
            })
            .catch(err => {
                console.error(err);
                document.getElementById("detail-content").innerHTML = "<p>加载失败，请稍后再试。</p>";
            });
    }

    loadDetails(); // 调用函数
    // 添加返回按钮事件监听
    document.addEventListener("DOMContentLoaded", function () {
      document.getElementById("backButton").addEventListener("click", function () {
        window.history.back();
      });
    });
</script>
</body>
</html>
